<template>
  <div class="account">
    <div class="form-wrap">
      <a-form
        name="custom-validation"
        ref="ruleForm"
        @finish="handleFinish"
        :model="account_form"
        :rules="rules_form"
      >
        <a-form-item name="username">
          <label>用户名</label>
          <a-input
            type="text"
            autocomplete="off"
            autoSize
            v-model:value="account_form.username"
          />
        </a-form-item>

        <a-form-item name="password">
          <label>密码</label>
          <a-input
            type="password"
            utocomplete="off"
            v-model:value="account_form.password"
          />
        </a-form-item>
        <a-form-item name="password">
          <label>确认密码</label>
          <a-input
            type="password"
            utocomplete="off"
            v-model:value="account_form.passwords"
          />
        </a-form-item>
        <a-form-item>
          <label>验证码</label>
          <a-row :gutter="12">
            <a-col :span="14"
              ><a-input
                type="password"
                utocomplete="off"
                v-model="account_form.code"
            /></a-col>
            <a-col :span="10"
              ><a-button
                block
                type="primary"
                class="yzm"
                :loading="button_loading"
                :disabled="button_disabled"
                @click="getCode"
                >{{ button_text }}</a-button
              ></a-col
            >
          </a-row>
        </a-form-item>

        <a-form-item class="hk">
          <Captcha />
        </a-form-item>

        <a-form-item class="hk">
          <a-button type="primary" html-type="submit" block> 注册 </a-button>
        </a-form-item>
      </a-form>
      <div class="text-center fs-12">
        <router-link to="/forget" class="color-white">忘记密码</router-link>|
        <router-link to="/">登录</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { message } from "ant-design-vue";
import { checkPhones, checkPasswords } from "../../utils/veri";
import { onMounted, reactive, toRefs } from "vue";
import Captcha from "@/components/Captcha";
import "./captcha.js";
export default {
  name: "Login",
  components: {
    Captcha,
  },
  setup() {
    let checkName = async (rule, value) => {
      if (!value) {
        return Promise.reject("请输入用户名");
      } else if (!checkPhones(value)) {
        return Promise.reject("请输入正确形式");
      } else {
        return Promise.resolve();
      }
    };
    let checkPassword = async (rule, value) => {
      if (!value) {
        return Promise.reject("请输入密码");
      } else if (!checkPasswords(value)) {
        return Promise.reject("请输入正确形式");
      } else {
        return Promise.resolve();
      }
    };
    const formConfig = reactive({
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      },
      account_form: {
        username: "",
        password: "",
        passwords: "",
        code: "",
      },
      rules_form: {
        username: [{ validator: checkName, trigger: "change" }],
        password: [{ validator: checkPassword, trigger: "change" }],
        passwords: [{ validator: checkPassword, trigger: "change" }],
      },
    });
    const dataItem = reactive({
      //获取验证码
      button_text: "请输入验证码",
      button_loading: false,
      button_disabled: false,
      sec: 3,
      timer: null,
    });
    const form = toRefs(formConfig);
    const data = toRefs(dataItem);

    const handleFinish = () => {
      console.log(123);
    };
    const getCode = () => {
      if (!formConfig.account_form.username) {
        message.info("用户名不能为空");
        return false;
      }
      if (dataItem.timer) {
        clearInterval(dataItem.timer);
      }
      dataItem.timer = setInterval(() => {
        const s = dataItem.sec--;
        dataItem.button_text = `${s}秒`;
        if (s <= 0) {
          clearInterval(dataItem.timer);
          dataItem.button_text = "重新获取";
        }
      }, 1000);
    };

    return {
      ...form,
      ...data,
      handleFinish,
      getCode,
    };
  },
};
</script>
<style lang="scss" scoped>
.hk {
  margin-top: 20px;
  margin-bottom: 20px;
}
.account {
  width: 100%;
  height: 100vh;
  background-color: #282828;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-wrap {
  width: 300px;
  padding-top: 100px;
  color: #fff;
  label {
    display: block;
    font-size: 14px;
    color: #fff;
    text-align: left;
  }
  .yzm {
    height: 27px;
  }
}
</style>
